<template>
  <div class="browse-content">
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <p>Species</p>
          <p>
            <a href="./species">
              <img src="@/assets/img/species.png" alt="" />
            </a>
          </p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <p>Associations</p>
          <p>
            <a href="./associations">
              <img src="@/assets/img/association.svg" alt="" />
            </a>
          </p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <p>Variants</p>
          <p>
            <a href="./variants">
              <img src="@/assets/img/gene.svg" alt="" />
            </a>
          </p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <p>Genes</p>
          <p>
            <a href="./genes">
              <img src="@/assets/img/dna.svg" alt="" />
            </a>
          </p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <p>Studies</p>
          <p>
            <a href="./studies">
              <img src="@/assets/img/paper.svg" alt="" />
            </a>
          </p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <p>Publications</p>
          <p>
            <a href="./publications">
              <img src="@/assets/img/study.svg" alt="" />
            </a>
          </p>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
</script>

<style lang="scss" scoped>
.browse-content {
  width: 80%;
  margin: 0 auto;
  .grid-content {
    border: 1px solid rgb(230, 227, 227);
    border-top-color: #419641;
    margin-right: 3px;
    padding: 10px 0;
    margin-bottom: 20px;
    p {
      width: 100%;
      text-align: center;
      font-size: 20px;
      display: inline-block;
      img {
        width: 60px;
        height: 60px;
        margin: 10px 10px 0 0;
        vertical-align: middle;
      }
      span {
        color: #419641;
      }
    }
  }
}
</style>